<template>
	<view class="login-page">

		<view style="display:flex;justify-content:center;">
			<img src="@/static/login_logo.png" style="height:188rpx;width:300rpx;" />
		</view>
		<view>
			<view style="height:256rpx;"></view>
			<view class="">
				<u-button v-if="!checked" type="primary" :hair-line="false" :custom-style="customStyle"
					@click="showToast()">本机号码一键登录</u-button>
				<u-button v-if="checked" type="primary" :hair-line="false" :custom-style="customStyle"
					open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">本机号码一键登录</u-button>
			</view>
			<view style="margin-top:41rpx;">
				<u-button type="info" :hair-line="false" :custom-style="customStyle1">使用验证码登录</u-button>
			</view>
			<view style="color:#999;text-align:center;margin-top:41rpx;">
				进入首页
			</view>
			<view style="height:200rpx;"></view>
		</view>


		<view
			style="position:fixed;bottom:40rpx;width:750rpx;font-weight:400;font-size:28rpx;display: flex;align-items: center;justify-content: center;">
			<u-checkbox-group>
				<u-checkbox v-model="checked" shape="circle" label-size="28rpx">已阅读并同意</u-checkbox>
			</u-checkbox-group>
			<view style="color:#0C7FF2;">《工匠无忧隐私协议》</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import WXBizDataCrypt from "@/common/WXBizDataCrypt.js";
	export default {
		data() {
			return {
				customStyle: {
					borderRadius: "28rpx",
					width: "570rpx",
					height: "100rpx",
					fontWeight: 400,
					background: "#3C6AF4",
					fontSize: "32rpx"
				},
				customStyle1: {
					borderRadius: "28rpx",
					width: "570rpx",
					height: "100rpx",
					fontWeight: 400,
					background: "#FFF",
					fontSize: "32rpx",
					color: "#0C7FF2"
				},
				form: {
					account: '',
					smsCode: ""
				},
				times: 0,
				code: "",
				checked: true
			}
		},
		methods: {
			getPhoneNumber(e) {
				let that = this
				uni.login({
					provider: 'weixin',
					success: res1 => {
						uni.showLoading({
							title: '加载中'
						});
						// 调用后端接口获取session_key
						this.$u.api.getSessionKey({
							code: res1.code
						}).then(res2 => {
							if (res2.code == 200) {
								let pc = new WXBizDataCrypt('wx38316ee4df1944cd', res2.session_key);
								let data = pc.decryptData(e.detail.encryptedData, e.detail.iv);
								that.wxlogin(data.phoneNumber, res2.open_id)
							} else {
								this.$refs.uToast.show({
									title: res.msg,
								})
							}
						})
					}
				})
			},
			// 微信获取手机号码登录
			wxlogin(phoneNumber, openId) {
				let that = this
				uni.showLoading({
					title: '加载中'
				});
				that.$u.api.phoneOneClickLogin({
					phoneNumber: phoneNumber,
					openId: openId
				}).then(res => {
					if (res.code == 200) {
						uni.setStorageSync('token', res.token);
						uni.setStorageSync('user', res.user);
						uni.setStorageSync('login', res.login)
						uni.reLaunch({
							url: '/pages/home/index'
						});
					} else {
						this.$refs.uToast.show({
							title: res.msg,
						})
					}
				})
			},
			showToast() {
				this.$refs.uToast.show({
					title: '请阅读并勾选隐私协议',
				})
			},
			toXieyi() {
				uni.navigateTo({
					url: '/pages/login/xieyi'
				});
			}
		}
	}
</script>
<style scoped>
	.login-page {
		height: 100vh;
		background: url('http://8.155.28.7:45/group1/M00/00/00/rBLpe2dL52iAOpSiABJk5Ehn-Es741.png') no-repeat;
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}
</style>